<template>
  <div class="divStyle">
    <div class="treeStyle">
      <div>
        <el-tree
          style="max-width: 600px"
          :data="treeList"
          default-expand-all
          :highlight-current="true"
          :expand-on-click-node="false"
          :check-strictly="true"
          @node-click="handleClick"
          :current-node-key="defaultSelectKey"
          node-key="key"
          v-loading="treeLoading"
        >
          <template #default="{ node, data }">
            <div class="custom-node">
              <el-icon v-if="data.nodeType !== nodeTypeEnum.button"
                ><component class="icons" :is="data.icon"></component
              ></el-icon>
              <span v-if="data.nodeType === nodeTypeEnum.button"
                >&nbsp;
                <buttonStyleLayout
                  :modelData="data.extendData"
                  :buttonName="data.extendData.buttonName"
                ></buttonStyleLayout>
              </span>
              <span v-else>&nbsp;{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="userStyle">
      <el-row class="rowNavStyle">
        <el-col :span="24" class="colNavStyle">
          <menuButton
            @addDataButtonRuleKey="addDataButtonRuleClick"
            @addDataRowRuleKey="addDataRowRuleClick"
            helper-path="pages/8552c0"
          ></menuButton>
          <!-- <el-button type="primary" @click="synchronousDataColsClick"
            >同步</el-button
          > -->
          <div
            style="
              margin-left: auto;
              margin-right: 10px;
              display: flex;
              color: red;
            "
          >
            <el-icon style="color: #67c23a; font-size: 22px"
              ><ChatLineRound /></el-icon
            ><span class="blink-text">表格数据列较多，可以左右移动表格</span>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        stripe
        :border="true"
        row-key="ruleId"
        default-expand-all
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" />
        <!-- 动态列 -->
        <el-table-column
          show-overflow-tooltip
          v-for="itme in columns"
          :key="itme.fieldEnName"
          :prop="itme.fieldEnName"
          :label="itme.fieldCnName"
          :min-width="itme.fieldWidth"
          :sortable="itme.fieldSortable"
          :align="itme.fieldAlign"
        >
          <template v-if="itme.fieldSlot === 'sexSlot'" #default="sexSlot">
            <el-tag v-if="sexSlot.row.sex == 1" type="primary">男</el-tag>
            <el-tag v-if="sexSlot.row.sex == 2" type="danger">女</el-tag>
          </template>
          <template v-else-if="itme.fieldSlot === 'isOpen'" #default="isOpen">
            <el-switch
              :before-change="switchClick"
              v-model="isOpen.row.isOpen"
              class="ml-2"
              inline-prompt
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              active-text="开启中"
              inactive-text="关闭中"
            />
          </template>
          <template
            v-else-if="itme.fieldSlot === 'ruleTypeStr'"
            #default="ruleTypeStr"
          >
            <el-tag v-if="ruleTypeStr.row.ruleType == 2" type="primary">{{
              ruleTypeStr.row.ruleTypeStr
            }}</el-tag>
            <el-tag v-if="ruleTypeStr.row.ruleType == 1" type="success">{{
              ruleTypeStr.row.ruleTypeStr
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <dataRowButton
              :model="scope.row"
              @editDataAuthKey="handleEdit(scope.row)"
            ></dataRowButton>
          </template>
        </el-table-column>
      </el-table>
      <pageLayout :pageData="page" @pageBnt="pageClick"></pageLayout>
    </div>
  </div>
  <setDataRule
    :isVisibles="isVisibles"
    :modelData="sysDataRuleModel"
    :dialogTitle="dialogTitle"
    @closeBnt="colosDialog"
  ></setDataRule>
</template>
    <script lang="ts" setup>
import { treeOutPut } from "@/model/public/treeModel";
import { onMounted, reactive, ref } from "vue";
import { basePageModel, pageCofing } from "@/model/public/public";
import setDataRule from "../setDataAtuhRule.vue";
import {
  DataRuleConfigTypeEnum,
  nodeTypeEnum,
  RuleTypeEnum,
} from "@/enum/public";
import pageLayout from "@/components/page.vue";
import buttonStyleLayout from "@/components/buttonStyle.vue";
import menuButton from "@/components/menuButton.vue";
import { useUserStore } from "@/store/user";
import { getAllMenuList } from "@/api/menu";
import { getDataRuleList } from "@/api/dataRule";
import { SysDataRuleInput, SysDataRuleOutPut } from "@/model/dataRule";
import { reflexSynchronousCols } from "@/api/menuTableCols";
import { ElMessage } from "element-plus";
import dataRowButton from "@/components/dataRowButton.vue";
import { GetMenuColsByMenuId } from "@/api/publicTool";
//初始加载dom
onMounted(() => {
  getAllMenuListMsg();
  GetMenuColsByMenuIdMsg();
});
//等待加载
const loading = ref(true);
const treeLoading = ref(true);
const userStore = useUserStore();
//table数据
const tableData = ref<SysDataRuleOutPut[]>([]);
//默认选择节点
const defaultSelectKey = ref<string>(userStore.corporationKey);
//控制弹出层显隐
const isVisibles = ref<boolean>(false);
//弹出层标题
const dialogTitle = ref<string>();
//当前选中节点
const currentSelectNode = ref<treeOutPut>({
  key: "",
  pKey: "",
  corporationKey: "",
  systemKey: "",
  label: "",
  sort: 0,
  disabled: false,
  isLeaf: false,
  icon: "",
  nodeType: 0,
  children: [],
});

//规则模型数据
const sysDataRuleModel = reactive<SysDataRuleInput>({
  RuleId: "",
  RuleName: "",
  MenuId: "",
  CorporationKey: "",
  SystemKey: "",
  RuleType: RuleTypeEnum.DataButtonRule,
  RuleJson: "",
  AnalysisRule: "",
  AnalysisRule_CN: "",
  ButtonIds: [],
  IsOpen: false,
  Remark: "",
  Sort: 1,
  FieldId: "",
});

//查询条件
const searchFilter = reactive<any>({
  CorporationKey: userStore.corporationKey,
  SystemKey: "",
  MenuId: "",
  RuleType: RuleTypeEnum.DataButtonRule,
});

//分页
const page = reactive<basePageModel>({
  currentPage: pageCofing.currentPage,
  pageSize: 10,
  total: pageCofing.total,
});

//tree数据
const treeList = ref<treeOutPut[]>([]);
const getAllMenuListMsg = function () {
  getAllMenuList()
    .then(({ data, code }) => {
      if (code == 200) {
        treeList.value = data;
      }
      treeLoading.value = false;
    })
    .catch(() => {
      treeLoading.value = false;
    });
};
//定义列
const columns = ref();
//菜单列
const GetMenuColsByMenuIdMsg = async () => {
  columns.value = await GetMenuColsByMenuId();
  if (columns.value.length > 1) {
    getDataRuleListMsg();
  } else {
    columns.value = [];
  }
};
//获取数据规则数据
const getDataRuleListMsg = async () => {
  getDataRuleList({
    currentPage: page.currentPage,
    pageSize: page.pageSize,
    filterJson: JSON.stringify(searchFilter),
  })
    .then(({ data, code, total }) => {
      if (code == 200) {
        tableData.value = data;
        page.total = total;
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

//树点击事件
function handleClick(node: treeOutPut) {
  currentSelectNode.value = node;
  searchFilter.CorporationKey = "";
  searchFilter.SystemKey = "";
  searchFilter.MenuId = "";
  if (node.nodeType === nodeTypeEnum.corporation) {
    searchFilter.CorporationKey = node.key;
  }
  if (node.nodeType === nodeTypeEnum.system) {
    searchFilter.SystemKey = node.key;
  }
  if (node.nodeType === nodeTypeEnum.menu) {
    searchFilter.MenuId = node.key;
  }

  getDataRuleListMsg();
}

//新增数据按钮规则
const addDataButtonRuleClick = function () {
  const model = ref<SysDataRuleOutPut>();
  addOrEditMethod(
    model.value!,
    true,
    DataRuleConfigTypeEnum.DataButtonRuleConfig
  );
};

//新增数据行规则
const addDataRowRuleClick = function () {
  const model = ref<SysDataRuleOutPut>();
  addOrEditMethod(model.value!, true, DataRuleConfigTypeEnum.DataRowRuleConfig);
};

//行编辑事件
const handleEdit = function (model: SysDataRuleOutPut) {
  addOrEditMethod(model, false, model.ruleType);
};

//新增或编辑方法
const addOrEditMethod = function (
  model: SysDataRuleOutPut,
  isAdd: boolean,
  ruleType: number
) {
  if (isAdd) {
    sysDataRuleModel.RuleId = "";
    sysDataRuleModel.RuleName = "";
    sysDataRuleModel.MenuId = "";
    sysDataRuleModel.CorporationKey = "";
    sysDataRuleModel.SystemKey = "";
    sysDataRuleModel.RuleType = ruleType;
    sysDataRuleModel.RuleJson = "";
    sysDataRuleModel.AnalysisRule = "";
    sysDataRuleModel.AnalysisRule_CN = "";
    sysDataRuleModel.IsOpen = false;
    sysDataRuleModel.Remark = "";
    sysDataRuleModel.Sort = 1;
  } else {
    sysDataRuleModel.RuleId = model.ruleId;
    sysDataRuleModel.RuleName = model.ruleName;
    sysDataRuleModel.MenuId = model.menuId;
    sysDataRuleModel.CorporationKey = model.corporationKey;
    sysDataRuleModel.SystemKey = model.systemKey;
    sysDataRuleModel.RuleType = model.ruleType;
    sysDataRuleModel.RuleJson = model.ruleJson;
    sysDataRuleModel.AnalysisRule = model.analysisRule;
    sysDataRuleModel.AnalysisRule_CN = model.analysisRule_CN;
    sysDataRuleModel.IsOpen = model.isOpen;
    sysDataRuleModel.Remark = model.remark;
    sysDataRuleModel.Sort = model.sort;
  }
  dialogTitle.value = isAdd
    ? "新增数据按钮规则"
    : "编辑【" + model.ruleName + "】数据按钮规则";
  isVisibles.value = true;
};

//关闭弹出层
const colosDialog = function () {
  getDataRuleListMsg();
  isVisibles.value = false;
};

//禁止点页面的滑块
const switchClick = function () {
  return new Promise((_, reject) => {
    return reject(new Error("Error"));
  });
};

//分页点击事件
const pageClick = function (basePageModel: basePageModel) {
  page.currentPage = basePageModel.currentPage;
  page.pageSize = basePageModel.pageSize;
  getDataRuleListMsg();
};

//同步数据列
const synchronousDataColsClick = function () {
  reflexSynchronousCols()
    .then(({ code }) => {
      if (code == 200) {
        ElMessage.success("同步成功");
      } else {
        ElMessage.success("同步失败");
      }
    })
    .catch(() => {
      ElMessage.success("同步失败");
    });
};
</script>
    <style scoped>
.divStyle {
  display: flex;
}
.treeStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
  width: 400px;
  height: 85vh;
  overflow-y: auto;
}
.treeTop {
  height: 50px;
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
  padding-left: 20px;
  align-items: center;
  display: flex;
}
.userStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
  margin-left: 3px;
  width: 100%;
  height: 85vh;
  overflow-y: auto;
}
.rowStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
}
.colStyle {
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
}
</style>